<template>
  <div class="demo">
    <!-- 老用户 -->
    <el-dialog
      custom-class="new-user-result-box zl-gift-dialog"
      :visible="isShowResultBox"
      :show-close="false"
    >
      <div class="new-user-result-cont">
        <img
          src="//image.zlketang.com/public/news/images/guanwangPic/new_user_result_head.png"
          alt=""
          class="new-user-result-head"
        />
        <img
          src="//image.zlketang.com/public/news/images/guanwangPic/new_user_result_book.png"
          alt=""
          class="new-user-result-book"
        />
        <img
          src="//image.zlketang.com/public/news/images/guanwangPic/home_fixed_new_user_close.png"
          alt="关闭按钮"
          class="new-user-result-close"
          @click="clearStatus"
        />
        <div class="new-user-result-content">
          <div class="new-user-result-title">
            <img
              :src="
                activated
                  ? '//image.zlketang.com/public/news/images/new_official/new_user_ac/lingquguo.png'
                  : '//image.zlketang.com/public/news/images/guanwangPic/new_user_success_title.png'
              "
              alt=""
            />
            <div
              style="margin-top: 5px; font-size: 14px; font-weight: normal; color: #ffffff"
            >
              优惠券已领取，前往个人中心-优惠券查看
            </div>
          </div>
          <div class="new-user-result-btn">
            <div class="new-user-result-code">
              <div class="new-user-result-code-title">
                <span>{{ activated ? '备考资料' : '课程讲义' }}未领取！</span>
                <span class="new-user-result-code-title-tip">数量有限！</span>
              </div>
              <div class="new-user-result-code-subtitle">
                快扫码联系学习规划师领取！
              </div>
              <div class="new-user-result-code-cont">
                <img
                  :src="parseResourceUrl(codeUrl)"
                  alt=""
                  class="new-user-result-code-cont-img"
                />
              </div>
              <div class="new-user-result-code-tip">打开微信扫一扫</div>
            </div>
          </div>
          <div class="new-user-result-tip">
            {{ activated ? '备考资料' : '讲义' }}失效时间
          </div>
          <div class="new-user-result-time">
            <div>
              <div class="new-user-result-time-count">{{ timeObj.minute }}</div>
              <div class="new-user-result-time-text">:</div>
              <div class="new-user-result-time-count">{{ timeObj.second }}</div>
              <div class="new-user-result-time-text">:</div>
              <div class="new-user-result-time-count">
                {{ timeObj.mSecond }}
              </div>
            </div>
          </div>
          <div class="new-user-result-btn1">
            <!-- <div class="new-user-result-btn-text" :class="activated ? 'new-user-result-btn-text-activated' : ''"
              @click="goToPersonal">
              去个人中心学习
            </div> -->
            <img
              class="new-user-result-btn-text"
              @click="goToPersonal"
              src="//image.zlketang.com/public/news/images/guanwangPic/new_user_to_study_center.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 新用户 -->
    <el-dialog
      custom-class="new-user-result-box-new zl-gift-dialog"
      :visible="isShowResultBoxNew"
      :show-close="false"
    >
      <div class="new-user-result-cont-new flex-wrap">
        <img
          src="//image.zlketang.com/public/news/images/guanwangPic/home_fixed_new_user_close.png"
          alt="关闭按钮"
          class="new-user-result-close new-user-result-close-1"
          @click="clearStatus"
        />
        <div class="new-left flex-wrap flex-center-wrap flex-column-wrap">
          <div class="new-left-title">
            课程讲义未领取！
            <span class="new-left-title-bold">数量有限！</span>
          </div>
          <div class="new-left-title-tip">快扫码联系学习规划师领取!</div>
          <img
            :src="parseResourceUrl(codeUrl)"
            alt=""
            class="new-left-code-img"
          />
          <div class="new-left-wx-s">打开微信扫一扫</div>

          <div class="new-left-jy-time">讲义失效时间</div>
          <div class="flex-center new-left-times">
            <div class="new-user-result-time-count-1">
              {{ timeObj.minute }}
            </div>
            <img
              class="point-in-time"
              src="//image.zlketang.com/public/news/others/pc_web/point-in-time.png"
              alt="时间点"
            />
            <div class="new-user-result-time-count-1">
              {{ timeObj.second }}
            </div>
            <img
              class="point-in-time"
              src="//image.zlketang.com/public/news/others/pc_web/point-in-time.png"
              alt="时间点"
            />
            <div class="new-user-result-time-count-1 w58">
              {{ timeObj.mSecond }}
            </div>
          </div>
        </div>

        <div class="new-right">
          <div class="new-right-list">
            <div
              class="new-right-list-item flex-center-wrap"
              v-for="item in list"
              :key="item.id"
            >
              <img
                class="new-right-list-item-img"
                src="//image.zlketang.com/public/news/others/imgs/gift_pc/bad28c22818fa225bc0bbb06d56ca104.png"
                alt=""
              />
              <div class="new-right-list-item-span">
                {{ item.body }}
              </div>
            </div>
          </div>
          <div class="flex-center mt22" @click="goToPersonal">
            <div class="new-right-btn">
              <span>去个人中心学习</span>
              <img
                src="//image.zlketang.com/public/news/others/pc_web/check-more.png"
                alt="更多"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import entryStore from '@/store/entry_store'
import { checkNewUser } from '@/api/common_apis'
import {
  getKefuCode,
  getRecommendPcWebAllCode,
  postActivateCoupons,
  getActivationConfigV2
} from '@/api/new_user_activity'
export default {
  components: {},
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      list: [],
      isShowResultBoxNew: false,
      isShowResultBox: false,
      activated: true,
      codeUrl: '',
      //倒计时，事件对象
      timeObj: {
        hour: 0,
        minute: 0,
        second: 0,
        mSecond: 0
      },
      is_new: false
    }
  },
  beforeMount() {
    entryStore.loadModule(this.$store, ['new_user_activity', 'user'])
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    isGiftClick() {
      return +storage.get('isGiftClick') === 1
    },
    curEnvironmentUrl() {
      if (location.host.includes('www')) {
        return 'prod'
      } else {
        return 'dev'
      }
    },
    configDatas() {
      return this.$store.state.new_user_activity.activationConfig
    },
    // 优惠券
    coupons() {
      return this.configDatas && this.configDatas.coupons
        ? this.configDatas.coupons
        : []
    },

    isLogin() {
      return this.$store.state.user.isLogin
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    async getCoupons() {
      // 获取优惠券
      let cids = []
      cids = this.coupons.reduce((sum, item) => {
        sum.push(item.cid)
        return sum
      }, [])
      cids = cids.join(',')
      if (!cids) return
      let { errcode, errmsg } = await postActivateCoupons({ cids }).catch(
        err => {
          return { errcode: 404, errmsg: '网络错误，请重试' }
        }
      )
      if (+errcode === 404) {
        this.$message({ type: 'warning', message: errmsg })
        return
      }
      //已经激活过
      if (+errcode === 1104) {
        this.activated = true
        return
      }
      // this.zlaBtn = {
      //   key_name: '领课成功_引导加V弹窗',
      //   key_content: '领课成功_引导加V弹窗'
      // }
    },
    //获取客服
    getKefuCode() {
      let linkId = ''
      if (this.activated) {
        linkId = this.curEnvironmentUrl === 'dev' ? '33' : '353'
      } else {
        linkId = this.curEnvironmentUrl === 'dev' ? '31' : '352'
      }
      getKefuCode({
        scene_id: linkId
      })
        .then(res => {
          let data = res.data || {}
          let detail = data.kefu_detail || {}
          this.codeUrl = detail.qr_code || ''
          if (!this.codeUrl) this.$message.error('未获取到老师二维码~')
        })
        .catch(e => {
          this.$message.error(e.errmsg)
        })
    },
    //去个人中心
    goToPersonal() {
      // this.zlaBtn = {
      //   key_name: '去个人中心学习',
      //   key_content: `${this.activated ? '已领取过该课程' : '领取成功'}`
      // }
      if (this.is_new) {
        this.zlaBtn = {
          key_name: '领课成功_引导加V弹窗',
          key_content: '领课成功_引导加V弹窗'
        }
      } else {
        this.zlaBtn = {
          key_name: '已经领过_引导加V弹窗',
          key_content: '已经领过_引导加V弹窗'
        }
      }
      this.goTo('/personal/index.html', { watch: true })
    },

    // 清空设置的打开弹窗状态
    clearStatus() {
      storage.set('isOldUser', 1)
      storage.set('isGiftClick', 0)
      this.$store.commit('user/setIsShowGift', false)
    },

    // 优惠卷的处理
    async handlerCode() {
      let { errcode, errmsg, data } = await getActivationConfigV2().catch(
        err => {
          return { errcode: 404, errmsg: '网络错误,请重试', data: {} }
        }
      )

      if (errcode !== 0) {
        this.$message({ type: 'warning', message: errmsg })
      }
      this.$store.commit('new_user_activity/setActivationConfig', data)
      this.getCoupons()
    },

    // 新用户拉取课程
    newFun() {
      if (!this.is_new) return
      this.createTimer()
      this.getKefuCode()
      getRecommendPcWebAllCode()
        .then(res => {
          this.list = res.data || []
          this.isShowResultBoxNew = true
        })
        .catch(() => {})

      // 领取优惠卷
      this.handlerCode()
      storage.set('isOldUser', 1)
    },

    oldFun() {
      if (this.is_new) return
      this.createTimer()
      this.handlerCode()
      this.getKefuCode()
      this.isShowResultBox = true
    },
    // 创建倒计时
    createTimer() {
      this.timeObj = {
        hour: 0,
        minute: 0,
        second: 0,
        mSecond: 0
      }
      clearInterval(this.countDownTimer)
      this.countDownTimer = null
      this.countDownTimer = setInterval(() => {
        this.dealCountDown()
      }, 100)
    },
    async init() {
      // 是否登陆
      if (!this.isLogin) {
        // 需要存个状态，表示他是直接触发到了这个页面
        this.$store.commit('user/setIsShowGift', false)
        this.showLoginDialog()
        return
      }
      try {
        let user = await checkNewUser()
        if (user && user.data && user.data.newStatus) {
          this.is_new = true
        } else {
          this.is_new = false
        }
      } catch (e) {
        this.is_new = false
      }

      // 是点击的礼物触发
      if (this.isGiftClick) {
        storage.set('isGiftClick', 0)
        if (this.is_new) {
          // 新用户
          this.newFun()
          return
        }
        // 老用户
        this.oldFun()
        return
      }
      // 非点击礼物触发- 只有新用户
      this.newFun()
    },
    //时间补0   num 位数
    filterTime(val, num) {
      if (!num) num = 2
      if (String(val).length < num) {
        let numStr = []
        for (let i = 0; i < num - String(val).length; i++) {
          numStr.push('0')
        }
        val = numStr.join('') + '' + val
      }
      return val
    },
    //处理倒计时
    dealCountDown() {
      let nowTime = Date.now()
      let endTime =
        new Date(new Date().toLocaleDateString()).getTime() + 86400000 - 1
      let timeDiff = Math.round((endTime - nowTime) / 1000)
      let timeDiffs = endTime - nowTime
      let hour =
        parseInt((timeDiff / 3600) % 24) + parseInt(timeDiff / 3600 / 24) * 24
      let minute = parseInt((timeDiff / 60) % 60)
      let second = timeDiff % 60
      let mSecond =
        Math.floor(timeDiffs - (hour * 3600 + minute * 60 + second) * 1000) +
        500
      mSecond = Math.abs(mSecond)
      hour = this.filterTime(hour)
      minute = this.filterTime(minute)
      second = this.filterTime(second)
      mSecond = this.filterTime(mSecond, 3)
      this.timeObj = {
        hour: hour,
        minute: minute,
        second: second,
        mSecond: mSecond
      }
    }
  }
}
</script>

<style scoped>
[v-cloak] {
  display: none !important;
}

/* 领取结果 */
.new-user-result-box {
  margin-top: calc(50vh - 312px) !important;
  box-shadow: none;
  background-color: transparent;
}
.new-user-result-cont {
  width: 754px;
  height: 582px;
  background: url('//image.zlketang.com/public/news/others/imgs/gift_pc/33400258403e9200d6b484ac1741dee3.png')
    no-repeat;
  background-size: 100%;
  margin: 0 auto;
}

.new-user-result-cont-new {
  width: 986px;
  height: 585px;
  background: url('//image.zlketang.com/public/news/others/pc_web/new-users-receive-benefits-background.png')
    no-repeat;
  background-size: 100%;
  margin: 0 auto;
}

.new-user-result-head {
  position: absolute;
  left: calc(50% - 97px);
  top: -35px;
  width: 194px;
  height: 115px;
}
.new-user-result-book {
  z-index: -1;
  position: absolute;
  left: calc(50% - 195px);
  top: -78px;
  width: 391px;
  height: 201px;
}
.new-user-result-content {
  padding: 30px 0;
}
.new-user-result-close {
  position: absolute;
  left: -106px;
  top: -56px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.new-user-result-title {
  font-size: 0;
  text-align: center;
}
.new-user-result-title img {
  width: 372px;
}
.new-user-result-btn {
  text-align: center;
  margin-top: 10px;
}

.new-user-result-btn1 {
  text-align: center;
}

.new-user-result-btn-text {
  display: inline-block;
  margin: 20px 0 11px 0;
  cursor: pointer;
}
.new-user-result-btn-text-activated {
  border: 1px solid #fff;
  color: #fff;
}
.new-user-result-code {
  padding: 20px 0;
  width: 554px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
}
.new-user-result-code-title {
  line-height: 21px;
  color: rgba(102, 112, 128, 1);
  font-size: 22px;
}
.new-user-result-code-title-tip {
  color: rgba(255, 129, 45, 1);
}
.new-user-result-code-subtitle {
  line-height: 16px;
  margin: 13px 0 19px 0;
  color: #262626;
  font-size: 16px;
}
.new-user-result-code-cont {
  width: 132px;
  height: 131px;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}
.new-user-result-code-cont-img {
  width: 132px;
  height: 131px;
}
.new-user-result-code-tip {
  line-height: 13px;
  margin-top: 10px;
  font-size: 14px;
  color: #262626;
}
.new-user-result-tip {
  width: 303px;
  height: 30px;
  line-height: 30px;
  margin: 30px auto 10px auto;
  background: linear-gradient(90deg, #ff9b7e 0%, #ff511d 42%, #ff9b7e 100%);
  font-size: 18px;
  color: #fff;
  text-align: center;
}

.new-user-result-time {
  bottom: 121px;
  overflow: hidden;
  margin: 0 auto;
  display: table;
}

.new-user-result-time-count {
  float: left;
  padding: 4px 3px;
  background: #ffffff;
  color: rgba(245, 147, 20, 1);
  font-size: 24px;
  text-align: center;
  border-radius: 8px;
}
.new-user-result-time-text {
  float: left;
  line-height: 36px;
  margin: 0 7px 0 8px;
  font-size: 24px;
  color: rgba(202, 48, 3, 1);
  cursor: pointer;
}

.demo /deep/ .new-user-result-box-new {
  margin-top: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  background-color: transparent;
}

.demo /deep/ .new-user-result-box-new .el-dialog__header {
  padding: 0;
}
.demo /deep/ .new-user-result-box-new .el-dialog__body {
  padding: 0;
}

.new-user-result-close-1 {
  left: -48px;
  top: -45px;
}

.new-left {
  margin-top: 91px;
  margin-left: 37px;
  padding-top: 41px;
  width: 416px;
}
.new-left-title {
  padding-left: 18px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #6c707f;
  line-height: 40px;
}

.new-left-title-bold {
  color: #ff8921;
}

.new-left-title-tip {
  margin-top: 11px;
  text-align: center;
  font-size: 20px;
  color: #6c707f;
  line-height: 28px;
}

.new-left-code-img {
  display: block;
  width: 160px;
  height: 160px;
  background: #d8d8d8;
  margin-top: 31px;
}

.new-left-wx-s {
  text-align: center;
  margin-top: 6px;
  font-size: 14px;
  color: #313131;
  line-height: 20px;
}

.new-left-jy-time {
  text-align: center;
  margin: 0 auto;
  margin-top: 26px;
  width: 252px;
  height: 32px;
  background: linear-gradient(
    90deg,
    rgba(254, 89, 7, 0) 0%,
    #fe5704 32%,
    #ff5703 70%,
    rgba(255, 85, 0, 0) 100%
  );

  font-size: 18px;
  color: #ffffff;
  line-height: 32px;
}

.new-left-times {
  margin-top: 20px;
}

.new-user-result-time-count-1 {
  border-radius: 8px;
  width: 40px;
  height: 40px;
  background: #ffffff;
  text-align: center;
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  padding: 0 5px;
  color: #ff6720;
}

.w58 {
  width: 58px;
}

.point-in-time {
  width: 5px;
  height: auto;
  margin: 0 12px;
}

.new-right {
  margin-top: 137px;
  margin-left: 38px;
  width: 459px;
  max-height: 366px;
  overflow: hidden;
}

.new-right-list {
  margin: 25px 14px 0 23px;
  max-height: 265px;
  overflow-y: auto;
}
.new-right-list-item {
  font-size: 20px;
  color: #6c707f;
  line-height: 41px;
}
.new-right-list-item-img {
  width: 25px;
  height: auto;
}
.new-right-list-item-span {
  margin-left: 15px;
  width: 382px;
}

.new-right-btn {
  margin: 0 auto;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #ff8921;
  line-height: 22px;
}

.new-right .mt22 {
  margin-top: 22px;
}

.new-right-btn img {
  margin-left: 4px;
  width: 13px;
  height: auto;
}
</style>
